<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>
	<style>
		body {
			background: url("../images/1.jfif");
			background-repeat: no-repeat;
			background-size: 100% auto;
		}

		#login-box {
			width: 375px;
			height: 375px;
			margin: 0 auto;
			margin-top: 13%;
			text-align: center;
			background-color: rgba(244, 251, 251, 0.5)
		}

		#login-box h1 {
			padding-top: 30px;
			color: #fff;
		}

		#login-box .form .item {
			margin-top: 15px;
		}

		#login-box .form .item i {
			font-size: 18px;
			color: #fff;
		}

		#login-box .form .item input {
			width: 180px;
			font-size: 18px;
			border: 0;
			border-bottom: 2px solid #fff;
			padding: 5px 10px;
			background: #ffffff00;
			color: #fff;
		}

		#login-box button {
			margin-top: 20px;
			width: 190px;
			height: 30px;
			font-size: 20px;
			font-weight: 700;
			color: #fff;
			background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
			border: 0;
			border-radius: 15px;
		}
	</style>
</head>

<body>
	<div id="login-box">
		<h1 style="text-align: center;color: #333;">注册</h1>
		<p>&nbsp;&nbsp;&nbsp;账号:&nbsp;&nbsp;&nbsp;&nbsp;
		<p><input id="user" type="text"><label id="name_trip"></label></p>
		</p>

		<p>密码:
		<p><input type="password" name="pwd"><label id="password_trip"></label></p>
		</p>
		<p>确认密码:
		<p><input type="password" id="repwd"><label id="password_trip"></label></p>
		</p>

		<div style="text-align: center;margin-top: 30px;">
			<input type="button" class="button" value="提交">

		</div>
	</div>
	<script>
		// 获取按钮
		let user = document.getElementById("user")
		// console.log(form);
		let pwd = document.getElementsByName('pwd')[0]
		// console.log(pwd);
		let repwd = document.querySelector("#repwd")
		// console.log(repwd);
		let ipt = document.querySelectorAll("input")
		ipt[3].onclick = async function (e) {
			// 1.验证表单
			if (pwd.value !== repwd.value) {
				alert('请确认密码是否一致');
				return;
			}
			// 2. 判断当前数据库是否存在当前输入账号
			let res2 = await axios.get('http://www.zhibao.com:3000/users', {
				params: {
					user: user.value
				}
			});
			console.log(res2);
			if (res2.data.length) {
				alert('抱歉，账号已存在');
				return;
			}
			try {
				// 3. 提交数据 - 发送请求
				let res = await axios.post('http://www.zhibao.com:3000/users', {
					user: ipt[0].value,
					pwd: ipt[1].value
				})
				// console.log(res);

				// 3. 接收响应 并处理响应后操作
				if (res) {
					alert('注册成功');
					window.location.href = './login.html'
				}
			} catch (error) {
				alert(error)
			}
		}
	</script>
</body>

</html>